<template>
    <div class="app-container">

        <div class="header">
            <el-button type="primary" size="mini" @click="showSaveWares">添加</el-button>
            <el-input style="width: 300px; margin-left: 100px;" v-model="waresListForm.memo" size="mini"
                placeholder="输入关键字搜索" @change="waresSearch" @input="checkVal">
                <i slot="suffix" class="el-icon-search"></i>
            </el-input>
        </div>

        <!-- 添加商品弹出框 -->
        <el-dialog title="添加商品" :visible.sync="showSaveWaresForm" :close-on-click-modal="false"
            @close="closeSaveWaresForm" width="75%">
            <el-form ref="saveWaresForm" :model="saveWaresForm" label-width="100px" :rules="saveWaresRules">
                <el-form-item label="商品名称" prop="waresName">
                    <el-input v-model="saveWaresForm.waresName"></el-input>
                </el-form-item>
                <el-form-item label="商品图片" prop="waresImagesId" :rules="checkSelectSaveWaresImagesId">
                    <el-select v-model="selectSaveWaresWaresImagesIdForm.url" placeholder="请选择" popper-class="url"
                        :popper-append-to-body="false" value-key="id" @change="selectSaveWaresImagesId"
                        style="width: 700px;">
                        <el-option v-for="item in imagesList" :key="item.id" :label="item.name" :value="item"
                            style="margin-top: 10px;">
                            <div class="img" style="height: 120px; text-align: center;">
                                <el-image style="width: 120px; height: 120px;" :src="item.url" fit="fit"></el-image>
                            </div>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="当前图片">
                    <el-image style="width: 100px; height: 100px" :src="saveWaresForm.waresImages" fit="fit"></el-image>
                </el-form-item>
                <el-form-item label="有无款式">
                    <el-radio v-model="isHaveDetail" @input="isHaveDetailChange" :label="true" border>有款式</el-radio>
                    <el-radio v-model="isHaveDetail" @input="isHaveDetailChange" :label="false" border>无款式</el-radio>
                </el-form-item>
                <div v-if="showDetail">
                    <div v-for="(item, index) in saveWaresForm.styleArr" :key="index">
                        <el-row>
                            <el-col :span="5">
                                <el-form-item label="款式名称" :prop="'styleArr.' + index + '.styleName'"
                                    :rules="[{ required: true, message: '请输入款式名称', trigger: 'change' }]">
                                    <el-input v-model="item.styleName"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="款式图片" :prop="'styleArr.' + index + '.styleImages'"
                                    :rules="[{ required: true, message: '请选择款式图片', trigger: ['blur', 'change'] }]">
                                    <el-select v-model="selectSaveWaresStyleImagesIdForm.styleArr[index].url"
                                        placeholder="请选择" popper-class="url" value-key="id"
                                        :popper-append-to-body="false"
                                        @change="selectSaveWaresStyleImagesId($event, index)">
                                        <el-option v-for="item in imagesList" :key="item.id" :label="item.name"
                                            :value="item" style="margin-top: 10px">
                                            <div class="img" style=" height: 120px; text-align: center;">
                                                <el-image style="width: 120px; height: 120px;" :src="item.url"
                                                    fit="fit"></el-image>
                                            </div>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item label="价格信息" :prop="'styleArr.' + index + '.costMessage'"
                                    :rules="[{ required: true, message: '请输入价格信息', trigger: 'change' }]">
                                    <el-input v-model="item.costMessage"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item label="单价" :prop="'styleArr.' + index + '.waresPrice'"
                                    :rules="[{ required: true, message: '请输入单价', trigger: 'change' }, { type: 'number', message: '必须是数字格式', trigger: 'blur', transform: (value) => Number(value) }]">
                                    <el-input v-model="item.waresPrice"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item>
                                    <el-button type="primary" size="mini"
                                        @click="addItems(saveWaresForm.styleArr.length)"
                                        v-if="index + 1 == saveWaresForm.styleArr.length">+</el-button>
                                    <el-button type="danger" size="mini" @click="deleteItems(item, index)"
                                        v-if="index !== 0">-</el-button>
                                </el-form-item>
                            </el-col>


                        </el-row>

                    </div>
                </div>
                <el-form-item v-if="!showDetail" label="价格信息" prop="costMessage">
                    <el-input v-model="saveWaresForm.costMessage"></el-input>
                </el-form-item>
                <el-form-item v-if="!showDetail" label="单价" prop="waresPrice">
                    <el-input v-model="saveWaresForm.waresPrice"></el-input>
                </el-form-item>
                <el-form-item label="选择分类" prop="brandsId" :rules="checkSelectSaveWaresBrandsId">
                    <el-select v-model="brandsSelectForm.brandsName" placeholder="请选择" popper-class="blueBack"
                        value-key="id" @change="selectSaveWaresBrandsId">
                        <el-option v-for="item in brandsList" :key="item.id" :label="item.brandsName" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveWaresData">提交</el-button>
                    <el-button @click="closeSaveWaresForm">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 修改商品弹出框 -->
        <el-dialog title="修改商品" :visible.sync="showEditWaresForm" :close-on-click-modal="false"
            @close="closeEditWaresForm">
            <el-form ref="editWaresForm" :model="editWaresForm" label-width="100px" :rules="editWaresRules">
                <el-form-item label="商品名称" prop="waresName">
                    <el-input v-model="editWaresForm.waresName"></el-input>
                </el-form-item>
                <el-form-item label="商品图片" prop="waresImagesId">
                    <el-select v-model="selectEditWaresWaresImagesIdForm.url" placeholder="请选择" popper-class="url"
                        :popper-append-to-body="false" @change="editSelectWaresImagesId" value-key="id">
                        <el-option v-for="item in imagesList" :key="item.id" :label="item.name" :value="item"
                            style="margin-top: 10px;">
                            <div class="img" style="height: 120px; text-align: center;">
                                <el-image style="width: 120px; height: 120px;" :src="item.url" fit="fit"></el-image>
                            </div>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="当前图片">
                    <el-image style="width: 100px; height: 100px" :src="editWaresForm.waresImages" fit="fit"></el-image>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="editWaresData">提交</el-button>
                    <el-button @click="closeEditWaresForm">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 商品款式列表弹出框 -->
        <el-dialog title="商品款式" :visible.sync="showStyleForm" :close-on-click-modal="false" @close="closeStyleForm"
            width="80%">
            <el-button type="primary" size="mini" @click="openSaveStyleForm" style="margin-bottom: 10px;">添加</el-button>
            <el-table :data="waresDetail" style="width: 100%;" stripe
                :default-sort="{ prop: 'date', order: 'ascending' }">
                <el-table-column label="款式信息">
                    <el-table-column label="款式名称" width="150" prop="styleName">
                        <template slot-scope="scope">
                            <div>{{ scope.row.styleName }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="款式图片" width="150" prop="styleImages">

                        <template slot-scope="scope">
                            <el-image style="width: 100px; height: 100px" :src="scope.row.styleImages"
                                fit="contain"></el-image>
                        </template>
                    </el-table-column>
                </el-table-column>

                <el-table-column label="添加">
                    <el-table-column label="添加者" width="100">

                        <template slot-scope="scope">
                            <div>{{ scope.row.saveAdmin }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作时间" width="180" sortable prop="date">

                        <template slot-scope="scope">
                            <i class="el-icon-time" v-if="scope.row.saveTime != null"></i>
                            <span style="margin-left: 10px">{{ scope.row.saveTime }}</span>
                        </template>
                    </el-table-column>
                </el-table-column>

                <el-table-column label="删除">
                    <el-table-column label="删除者">

                        <template slot-scope="scope">
                            <div>{{ scope.row.removeAdmin }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="理由">

                        <template slot-scope="scope">
                            <div>{{ scope.row.removeMemo }}</div>
                        </template>
                    </el-table-column>
                </el-table-column>

                <el-table-column label="操作">
                    <el-table-column label="修改">

                        <template slot-scope="scope">
                            <el-button type="primary" circle @click="showEditStyle(scope.row.id)"
                                icon="el-icon-edit"></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">

                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.isDelete" active-color="#66b1ff" inactive-color="#adadad"
                                active-text="恢复" inactive-text="删除" :active-value="0" :inactive-value="1"
                                @change="changeStyleOnAdnOffSwitch($event, scope.$index, scope.row)">
                            </el-switch>
                            <el-switch v-model="scope.row.state"
                                @change="changeStylePutAndPullSwitch($event, scope.$index, scope.row)"
                                active-color="#66b1ff" inactive-color="#adadad" active-text="上架" inactive-text="下架"
                                :active-value="0" :inactive-value="1">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态">
                        <template slot-scope="scope">
                            <el-tag type="success" effect="dark" v-if="scope.row.state == 0">启用</el-tag>
                            <el-tag type="info" effect="dark" v-if="scope.row.state == 1">删除</el-tag>
                            <el-tag type="danger" effect="dark" v-if="scope.row.state == 2">异常</el-tag>
                        </template>
                    </el-table-column>s
                </el-table-column>
            </el-table>
            <el-pagination @size-change="detailWaresSizeChange" @current-change="detailWaresCurrentChange"
                :page-size="waresDetailForm.size" :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next"
                :total="waresDetailTotal" style="margin-top: 20px;">
            </el-pagination>
        </el-dialog>

        <!-- 添加商品款式弹出框 -->
        <el-dialog title="添加商品款式" :visible.sync="showSaveStyleForm" :close-on-click-modal="false"
            @close="closeSaveStyleForm">
            <el-form ref="saveStyleForm" :model="saveStyleForm" label-width="100px" :rules="saveStyleRules">
                <el-form-item label="款式名称" prop="styleName">
                    <el-input v-model="saveStyleForm.styleName"></el-input>
                </el-form-item>
                <el-form-item label="款式图片" prop="styleImagesId" :rules="checkSelectSaveStyleStyleImagesId">
                    <el-select v-model="selectSaveWaresStyleStyleImagesIdForm.url" placeholder="请选择" popper-class="url"
                        value-key="id" :popper-append-to-body="false" @change="selectSaveStyleStyleImagesId">
                        <el-option v-for="item in imagesList" :key="item.id" :label="item.name" :value="item"
                            style="margin-top: 10px;">
                            <div class="img" style="height: 120px; text-align: center;">
                                <el-image style="width: 120px; height: 120px;" :src="item.url" fit="fit"></el-image>
                            </div>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="当前图片">
                    <el-image style="width: 100px; height: 100px" :src="saveStyleForm.waresImages" fit="fit"></el-image>
                </el-form-item>
                \<div v-for="(item, index) in saveStyleForm.costArr" :key="index">
                    <el-row style="display: flex; align-items: center;">
                        <el-col :span="8">
                            <el-form-item label="价格信息" :prop="'costArr.' + index + '.costMessage'"
                                :rules="[{ required: true, message: '请输入价格信息', trigger: 'change' }]">
                                <el-input v-model="item.costMessage"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="单价" :prop="'costArr.' + index + '.waresPrice'"
                                :rules="[{ required: true, message: '请输入单价', trigger: 'change' }, { type: 'number', message: '必须是数字格式', trigger: 'blur', transform: (value) => Number(value) }]">
                                <el-input v-model="item.waresPrice"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item>
                                <el-button type="primary" icon="el-icon-plus" size="mini"
                                    @click="addSaveItems(saveStyleForm.costArr.length)"
                                    v-if="index + 1 == saveStyleForm.costArr.length"></el-button>
                                <el-button type="danger" icon="el-icon-minus" size="mini"
                                    @click="deleteSaveItems(item, index)" v-if="index !== 0"></el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <el-form-item>

                    <template slot-scope="scope">
                        <el-button type="primary" @click="saveStyleData()">提交</el-button>
                        <el-button @click="closeSaveStyleForm">取消</el-button>
                    </template>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 修改商品款式弹出框 -->
        <el-dialog title="修改商品款式" :visible.sync="showEditStyleForm" :close-on-click-modal="false"
            @close="closeEditStyleForm">
            <el-form ref="editStyleForm" :model="editStyleForm" label-width="100px" :rules="editStyleRules">
                <el-form-item label="款式名称" prop="styleName">
                    <el-input v-model="editStyleForm.styleName"></el-input>
                </el-form-item>
                <el-form-item label="款式图片" prop="styleImagesId">
                    <el-select v-model="selectEditStyleStyleImagesIdForm.url" placeholder="请选择" popper-class="url"
                        value-key="id" :popper-append-to-body="false" @change="selectEditStyleStyleImagesId">
                        <el-option v-for="item in imagesList" :key="item.id" :label="item.name" :value="item"
                            style="margin-top: 10px;">
                            <div class="img" style="height: 120px; text-align: center;">
                                <el-image style="width: 120px; height: 120px;" :src="item.url" fit="fit"></el-image>
                            </div>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="当前图片">
                    <el-image style="width: 100px; height: 100px" :src="editStyleForm.styleImages" fit="fit"></el-image>
                </el-form-item>
                <!-- <el-form-item label="价格信息" prop="costMessage">
                    <el-input v-model="editStyleForm.costMessage"></el-input>
                </el-form-item>
                <el-form-item label="单价" prop="waresPrice">
                    <el-input v-model="editStyleForm.waresPrice"></el-input>
                </el-form-item> -->
                <el-form-item>

                    <template slot-scope="scope">
                        <el-button type="primary" @click="editStyleData">提交</el-button>
                        <el-button @click="closeEditStyleForm">取消</el-button>
                    </template>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 商品价格列表弹出框 -->
        <el-dialog title="商品价格" :visible.sync="showCostListForm" :close-on-click-modal="false"
            @close="closeCostListForm" width="80%">
            <el-button type="primary" size="mini" @click="openSaveCostForm" style="margin-bottom: 10px;">添加</el-button>
            <el-table :data="waresCost" style="width: 100%;" stripe
                :default-sort="{ prop: 'date', order: 'descending' }">
                <el-table-column label="价格信息">
                    <el-table-column label="价格信息" width="120" prop="costMessage">

                        <template slot-scope="scope">
                            <div>{{ scope.row.costMessage }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="单价" width="120" prop="waresPrice">

                        <template slot-scope="scope">
                            <div>{{ scope.row.waresPrice }}</div>
                        </template>
                    </el-table-column>
                </el-table-column>

                <el-table-column label="添加">
                    <el-table-column label="添加者">

                        <template slot-scope="scope">
                            <div>{{ scope.row.saveAdmin }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作时间" width="180" sortable prop="date">

                        <template slot-scope="scope">
                            <i class="el-icon-time" v-if="scope.row.saveTime != null"></i>
                            <span style="margin-left: 10px">{{ scope.row.saveTime }}</span>
                        </template>
                    </el-table-column>
                </el-table-column>

                <el-table-column label="删除">
                    <el-table-column label="删除者">

                        <template slot-scope="scope">
                            <div>{{ scope.row.removeAdmin }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="理由">

                        <template slot-scope="scope">
                            <div>{{ scope.row.removeMemo }}</div>
                        </template>
                    </el-table-column>
                </el-table-column>

                <el-table-column label="操作">
                    <el-table-column label="修改">

                        <template slot-scope="scope">
                            <el-button type="primary" circle @click="showEditCost(scope.row.id)"
                                icon="el-icon-edit"></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">

                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.isDelete" active-color="#66b1ff" inactive-color="#adadad"
                                active-text="恢复" inactive-text="删除" :active-value="0" :inactive-value="1"
                                @change="changeCostOnAdnOffSwitch($event, scope.$index, scope.row)">
                            </el-switch>
                            <el-switch v-model="scope.row.state"
                                @change="changeCostPutAndPullSwitch($event, scope.$index, scope.row)"
                                active-color="#66b1ff" inactive-color="#adadad" active-text="上架" inactive-text="下架"
                                :active-value="0" :inactive-value="1">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态">

                        <template slot-scope="scope">
                            <el-tag type="success" effect="dark" v-if="scope.row.state == 0">启用</el-tag>
                            <el-tag type="info" effect="dark" v-if="scope.row.state == 1">下架</el-tag>
                            <el-tag type="danger" effect="dark" v-if="scope.row.state == 2">异常</el-tag>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="costSizeChange" @current-change="costCurrentChange" :page-size="costForm.size"
                :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next" :total="waresCostTotal"
                style="margin-top: 20px;">
            </el-pagination>
        </el-dialog>

        <!-- 添加商品价格弹出框 -->
        <el-dialog title="添加商品价格" :visible.sync="showSaveCostForm" :close-on-click-modal="false"
            @close="closeSaveCostForm">
            <el-form ref="saveCostForm" :model="saveCostForm" label-width="130px" :rules="saveCostRules">
                <el-form-item label="价格信息" prop="costMessage">
                    <el-input v-model="saveCostForm.costMessage"></el-input>
                </el-form-item>
                <el-form-item label="单价" prop="costPrice">
                    <el-input v-model="saveCostForm.costPrice"></el-input>
                </el-form-item>
                <el-form-item label="所属款式" prop="styleId" :rules="checkSelectSaveCostWaresId">
                    <el-select v-model="selectSaveCostStyleIdForm.styleName" placeholder="请选择" popper-class="blueBack"
                        value-key="id" :popper-append-to-body="false" @change="selectSaveCostStyleId">
                        <el-option v-for="item in styleList" :key="item.id" :label="item.styleName" :value="item">
                            <div>{{ item.styleName }}</div>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>

                    <template slot-scope="scope">
                        <el-button type="primary" @click="saveCostData()">提交</el-button>
                        <el-button @click="closeSaveCostForm">取消</el-button>
                    </template>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 修改商品价格弹出框 -->
        <el-dialog title="修改商品价格" :visible.sync="showEditCostForm" :close-on-click-modal="false"
            @close="closeEditCostForm">
            <el-form ref="editCostForm" :model="editCostForm" label-width="130px" :rules="editCostRules">
                <el-form-item label="价格信息" prop="costMessage">
                    <el-input v-model="editCostForm.costMessage"></el-input>
                </el-form-item>
                <el-form-item label="单价" prop="waresPrice">
                    <el-input v-model="editCostForm.waresPrice"></el-input>
                </el-form-item>

                <el-form-item>

                    <template slot-scope="scope">
                        <el-button type="primary" @click="editCostData">提交</el-button>
                        <el-button @click="closeEditCostForm">取消</el-button>
                    </template>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 商品列表 -->
        <div class="content">
            <el-table :data="waresList" style="width: 100%;" stripe
                :default-sort="{ prop: 'date', order: 'descending' }">
                <el-table-column label="商品信息" width="120">
                    <el-table-column label="商品名称" prop="waresName">
                        <template slot-scope="scope">
                            <div>{{ scope.row.waresName }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品图片" prop="waresImages">
                        <template slot-scope="scope">
                            <el-image style="width: 100px; height: 100px" :src="scope.row.waresImages"
                                fit="contain"></el-image>
                        </template>
                    </el-table-column>
                </el-table-column>

                <el-table-column label="添加" width="120">
                    <el-table-column label="添加者">

                        <template slot-scope="scope">
                            <div>{{ scope.row.saveAdmin }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作时间" width="180" sortable prop="date">

                        <template slot-scope="scope">
                            <i class="el-icon-time" v-if="scope.row.saveTime != null"></i>
                            <span style="margin-left: 10px">{{ scope.row.saveTime }}</span>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="删除">
                    <el-table-column label="删除者">
                        <template slot-scope="scope">
                            <div>{{ scope.row.removeAdmin }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="删除理由">
                        <template slot-scope="scope">
                            <div>{{ scope.row.removeMemo }}</div>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="操作">
                    <el-table-column label="查看">
                        <template slot-scope="scope">
                            <el-button type="text" size="small"
                                @click="showDetailWares(scope.row.id)">查看商品款式</el-button><br>
                            <el-button type="text" size="small" @click="showCost(scope.row.id)">查看商品价格</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="修改" width="80">
                        <template slot-scope="scope">
                            <el-button type="primary" circle @click="showEditWares(scope.row.id)"
                                icon="el-icon-edit"></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.isDelete" ref="switch" active-color="#66b1ff" active-text="恢复"
                                inactive-text="删除" @change="changeWaresOnAndOffSwitch($event, scope.$index, scope.row)"
                                :active-value="0" :inactive-value="1" inactive-color="#adadad">
                            </el-switch>
                            <el-switch v-model="scope.row.state"
                                @change="changeWaresPutAndPullSwitch($event, scope.$index, scope.row)"
                                active-color="#66b1ff" inactive-color="#adadad" active-text="上架" inactive-text="下架"
                                :active-value="0" :inactive-value="1">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态">
                        <template slot-scope="scope">
                            <el-tag type="success" effect="dark" v-if="scope.row.state == 0">启用</el-tag>
                            <el-tag type="info" effect="dark" v-if="scope.row.state == 1">删除</el-tag>
                            <el-tag type="danger" effect="dark" v-if="scope.row.state == 2">异常</el-tag>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="waresListSizeChange" @current-change="waresListCurrentChange"
                :page-size="waresListForm.size" :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next"
                :total="waresListTotal" style="margin-top: 20px;">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import utils from '@/utils/checkLogin'
import { getWaresList, getAllStyleListBySelect, getAllImagesListBySelect, getAllBrandsListBySelect, getAllStyleListBySelectMany, getStyleList, getCostList, saveWares, offSaleWares, onSaleWares, pullWares, putWares, getUpdateWaresInfo, editWares, saveStyle, getUpdateStyleInfo, editStyle, offSaleStyle, onSaleStyle, putStyle, pullStyle, saveCost, getUpdateCostInfo, editCost, offSaleCost, onSaleCost, putCost, pullCost } from '../../api/api'
import { jwtDecode } from 'jwt-decode'
import { Message } from 'element-ui'
export default {
    data() {
        return {
            showSaveWaresForm: false,
            showEditWaresForm: false,
            showStyleForm: false,
            showCostListForm: false,
            waresList: [],
            waresListSearch: '',
            waresDetail: [],
            waresDetailSearch: '',
            waresCost: [],
            styleList: [],
            waresListTotal: 0,
            waresDetailTotal: 0,
            waresCostTotal: 0,
            waresListForm: {
                page: 1,
                size: 10,
                memo: ''
            },
            saveWaresRules: {
                waresName: [
                    { required: true, message: '请输入名称', trigger: 'change' }
                ],
                waresImagesId: [
                    { required: true, message: '请选择商品图片', trigger: ['blur', 'change'] }
                ],
                costMessage: [
                    { required: true, message: '请输入价格信息', trigger: 'change' }
                ],
                waresPrice: [
                    { required: true, message: '请输入价格', trigger: 'change' },
                    { type: 'number', message: '请输入数字', trigger: 'blur', transform: (value) => Number(value) },
                ]
            },
            editWaresForm: {
                waresId: null,
                waresName: '',
                waresImagesId: null,
            },
            editWaresRules: {
                waresName: [
                    { required: true, message: '请输入名称', trigger: 'change' }
                ]
            },
            waresDetailForm: {
                waresId: null,
                page: 1,
                size: 10
            },
            costForm: {
                waresId: null,
                page: 1,
                size: 10
            },
            saveWaresForm: {
                waresName: '',
                waresImagesId: null,
                haveStyle: '',
                brandsId: null,
                styleArr: [
                    {
                        styleName: '',
                        styleImages: null,
                        costMessage: '',
                        waresPrice: null,
                    }
                ],
                costMessage: '',
                waresPrice: null,
            },
            isHaveDetail: true,
            imagesList: [],
            brandsList: [],
            showDetail: false,
            fileList: [],
            selectSaveWaresWaresImagesIdForm: {
                url: ''
            },
            selectEditStyleStyleImagesIdForm: {
                url: ''
            },
            checkSelectSaveWaresImagesId: [
                { required: true, message: '请选择商品图片', validator: this.saveWaresWaresImagesIdValidator }
            ],
            selectSaveWaresStyleImagesIdForm: {
                styleArr: [
                    {
                        url: ''
                    }
                ]
            },
            checkSelectSaveWaresBrandsId: [
                { required: true, message: '请选择商品图片', validator: this.saveWaresBrandsIdValidator }
            ],
            checkSelectSaveCostWaresId: [
                { required: true, message: '请选择款式', validator: this.saveCostStyleIdValidator }
            ],
            selectEditWaresWaresImagesIdForm: {
                url: ''
            },
            selectSaveCostStyleIdForm: {
                styleName: ''
            },
            checkSelectSaveStyleStyleImagesId: [{
                required: true,
                message: '请选择款式图片',
                validator: this.editStyleStyleImagesIdValidator
            }],
            waresImagesSelectForm: {
                waresImagesId: null,
                waresImagesName: ''
            },
            styleImagesSelectForm: {
                styleImagesId: null,
                styleImagesName: ''
            },
            brandsSelectForm: {
                brandsName: ''
            },
            showSaveStyleForm: false,
            saveStyleRules: {
                styleName: [
                    { required: true, message: '请输入款式名称', trigger: 'change' }
                ],
                styleImagesId: [
                    { required: true, message: '请选择款式图片', trigger: ['blur', 'change'] }
                ],
                costMessage: [
                    { required: true, message: '请输入价格信息', trigger: 'change' }
                ],
                waresPrice: [
                    { required: true, message: '请输入价格', trigger: 'change' },
                    { type: 'number', message: '请输入数字', trigger: 'blur', transform: (value) => Number(value) },
                ]
            },
            selectSaveWaresStyleStyleImagesIdForm: {
                url: ''
            },

            saveStyleForm: {
                styleName: '',
                styleImagesId: null,
                waresId: null,
                costArr: [
                    {
                        costMessage: '',
                        waresPrice: ''
                    }
                ]
            },
            showEditStyleForm: false,
            editStyleForm: {
                styleName: '',
                styleImagesId: null,
                waresId: null,
                costMessage: '',
                waresPrice: ''
            },
            editStyleRules: {
                styleName: [
                    { required: true, message: '请输入款式名称', trigger: 'change' }
                ]
            },
            showSaveCostForm: false,
            saveCostRules: {
                costMessage: [
                    { required: true, message: '请输入价格信息', trigger: 'change' }
                ],
                costPrice: [
                    { required: true, message: '请输入价格', trigger: 'change' },
                    { type: 'number', message: '请输入数字', trigger: 'blur', transform: (value) => Number(value) },
                ],
                styleId: [
                    { required: true, message: '请选择所属款式', trigger: ['blur', 'change'] }
                ]
            },
            saveCostForm: {
                costMessage: '',
                costPrice: '',
                styleId: null,
                waresId: null
            },
            styleSelectForm: {
                styleId: null,
                styleName: ''
            },
            showEditCostForm: false,
            editCostForm: {
                costId: null,
                costMessage: '',
                waresPrice: '',
            },
            editCostRules: {
                costMessage: [
                    { required: true, message: '请输入价格信息', trigger: 'change' }
                ],
                waresPrice: [
                    { required: true, message: '请输入价格', trigger: 'change' },
                    { type: 'number', message: '请输入数字', trigger: 'blur', transform: (value) => Number(value) },
                ],
                styleId: [
                    { required: true, message: '请选择所属款式', trigger: ['blur', 'change'] }
                ]
            }
        }
    },
    methods: {
        saveWaresWaresImagesIdValidator(rule, value, callback) {
            if (this.selectSaveWaresWaresImagesIdForm.url === '') {
                callback(new Error('请选择商品图片'))
            } else {
                callback()
            }
        },
        saveWaresBrandsIdValidator(rule, value, callback) {
            if (this.brandsSelectForm.brandsName === '') {
                callback(new Error('请选择商品分类'))
            } else {
                callback()
            }
        },
        editStyleStyleImagesIdValidator(rule, value, callback) {
            if (this.selectSaveWaresStyleStyleImagesIdForm.url === '') {
                callback(new Error('请选择款式图片'))
            } else {
                callback()
            }
        },
        saveCostStyleIdValidator(rule, value, callback) {
            if (this.selectSaveCostStyleIdForm.styleName === '') {
                callback(new Error('请选择款式'))
            } else {
                callback()
            }
        },

        // 获取商品列表
        getWaresListData() {
            getWaresList(this.waresListForm).then((res) => {
                if (res.code == 200) {
                    this.waresList = res.data.data
                    console.log('商品列表', res);
                    this.waresListTotal = res.data.total
                }
            })
        },

        // 全部素材列表
        getAllImagesListData() {
            getAllImagesListBySelect().then((res) => {
                if (res.code == 200) {
                    console.log('全部素材列表', res)
                    this.imagesList = res.data
                }
            })
        },
        // 全部分类列表
        getAllBrandsListData() {
            getAllBrandsListBySelect().then((res) => {
                if (res.code == 200) {
                    console.log('全部商品分类列表', res)
                    this.brandsList = res.data
                }
            })
        },

        // 全部款式列表
        getAllStyleListData() {
            getAllStyleListBySelectMany().then((res) => {
                if (res.code == 200) {
                    console.log('全部款式列表（无参数）', res);
                    this.styleList = res.data
                }
            })
        },

        showSaveWares() {
            this.showSaveWaresForm = true
            this.getAllImagesListData()
            this.getAllBrandsListData()
            this.isHaveDetailChange(true)
        },

        // 商品信息列表，当前的页数改变时
        waresListCurrentChange(e) {
            this.waresListForm.page = e
            console.log('CurrentChange', JSON.stringify(this.waresListForm));
            console.log('第' + e + '页')
            this.getWaresListData()
        },

        // 商品信息列表，当每页条数改变时
        waresListSizeChange(e) {
            this.waresListForm.size = e
            console.log('SizeChange', JSON.stringify(this.waresListForm));
            console.log('切换为每页' + e + '条')
            this.getWaresListData()
        },

        // 关闭商品信息添加弹出框
        closeSaveWaresForm() {
            this.showSaveWaresForm = false
            
            this.$nextTick(() => {
                this.$refs.saveWaresForm.resetFields()
                this.selectSaveWaresWaresImagesIdForm.url = ''
                this.selectSaveWaresStyleImagesIdForm.styleArr.forEach((v) => {
                    v.url = ''
                })
                this.saveWaresForm.waresImages = ''
                this.brandsSelectForm.brandsName = ''
            })
        },
        // 点击商品信息表格的 “ 编辑 ” 按钮，数据回显
        showEditWares(waresId) {
            this.editWaresForm.waresId = waresId
            this.getAllImagesListData()
            this.showEditWaresForm = true
            let query = {
                waresId
            }
            getUpdateWaresInfo(query).then((res) => {
                if (res.code == 200) {
                    console.log('修改商品（数据回显）', res)
                    this.editWaresForm.waresName = res.data.waresName
                    this.editWaresForm.waresImages = res.data.waresImages
                    this.selectEditWaresWaresImagesIdForm.url = res.data.waresImages
                    this.editWaresForm.waresImages = res.data.waresImages
                }
            })
        },

        // 编辑-提交
        editWaresData() {
            console.log(JSON.stringify(this.editWaresForm))
            editWares(this.editWaresForm).then((res) => {
                if (res.code == 200) {
                    Message({
                        message: '修改成功',
                        type: 'success',
                        duration: 3000
                    })
                    console.log('修改商品', res)
                    setTimeout(() => {
                        this.showEditWaresForm = false
                    }, 2000)
                    this.getWaresListData()
                } else {
                    Message(({
                        message: '修改失败',
                        type: 'success',
                        duration: 2000
                    }))
                }
            })
        },
        editSelectWaresImagesId(e) {
            this.editWaresForm.waresImages = e.url
            this.selectEditWaresWaresImagesIdForm.url = e.url
            this.editWaresForm.waresImagesId = e.id
        },

        // 关闭商品修改弹框
        closeEditWaresForm() {
            this.showEditWaresForm = false
        },

        // 点击商品信息表格的 “ 删除 ” 按钮
        handleDelete(index, row) {
            console.log(index, row);
        },

        // 获取商品款式
        getWaresDetailData(waresId) {
            this.waresDetailForm.waresId = waresId
            getStyleList(this.waresDetailForm).then((res) => {
                if (res.code == 200) {
                    console.log('商品款式', res)
                    this.waresDetail = res.data
                    this.waresDetailTotal = res.total
                }
            })
        },
        // 查看商品款式列表
        showDetailWares(waresId) {
            console.log(waresId);
            this.showStyleForm = true
            this.getWaresDetailData(waresId)
        },
        // 关闭商品款式列表
        closeStyleForm() {
            this.showStyleForm = false
        },
        // 商品款式，当前的页数改变时
        detailWaresCurrentChange(e) {
            this.waresDetailForm.page = e
            this.getWaresDetailData(this.waresDetailForm.waresId)
        },
        // 商品款式，当每页条数改变时
        detailWaresSizeChange(e) {
            this.waresDetailForm.size = e
            this.getWaresListData(this.waresDetailForm.waresId)
        },

        // 获取商品价格
        getCostData(waresId) {
            console.log('waresId', waresId)
            this.costForm.waresId = waresId
            getCostList(this.costForm).then((res) => {
                if (res.code == 200) {
                    console.log('商品价格', res)
                    this.waresCost = res.data
                    this.waresCostTotal = res.total
                }
            })
        },

        // 查看商品价格
        showCost(waresId) {
            this.costForm.waresId = waresId
            this.showCostListForm = true
            this.getCostData(waresId)
            this.getWaresDetailData(waresId)
        },

        // 关闭商品价格列表弹出框
        closeCostListForm() {
            this.showCostListForm = false
        },

        // 商品价格，当前的页数改变时
        costCurrentChange(e) {
            this.costForm.page = e
            this.getCostData(this.costForm.waresId)
        },

        // 商品价格，当每页条数改变时
        costSizeChange(e) {
            this.costForm.size = e
            this.getCostData(this.costForm.waresId)
        },
        // 搜索
        waresSearch() {
            this.getWaresListData()
        },
        // 如果搜索框的值为空，刷新一下商品列表
        checkVal() {
            if (this.waresListForm.memo == '') {
                this.getWaresListData()
            }
        },
        isHaveDetailChange(e) {
            console.log(e);
            this.isHaveDetail = e
            this.showDetail = e
            this.saveWaresForm.haveStyle = this.isHaveDetail ? true : false
        },
        addItems(length) {
            this.saveWaresForm.styleArr.push({
                styleName: '',
                styleImages: null,
                costMessage: '',
                waresPrice: null,
            })
            this.selectSaveWaresStyleImagesIdForm.styleArr.push({
                url: ''
            })
            console.log(JSON.stringify(this.saveWaresForm.styleArr))
        },
        deleteItems(item, index) {
            this.saveWaresForm.styleArr.splice(index, 1)
        },
        addSaveItems(length) {
            this.saveStyleForm.costArr.push({
                costMessage: '',
                waresPrice: ''
            })
        },
        deleteSaveItems(item, index) {
            this.saveStyleForm.costArr.splice(index, 1)
        },
        selectSaveWaresImagesId(e) {
            this.saveWaresForm.waresImages = e.url
            this.selectSaveWaresWaresImagesIdForm.url = e.url
            this.saveWaresForm.waresImagesId = e.id
        },
        selectSaveStyleStyleImagesId(e) {
            this.saveStyleForm.waresImages = e.url
            this.selectSaveWaresStyleStyleImagesIdForm.url = e.url
            this.saveStyleForm.styleImagesId = e.id
        },
        selectEditStyleStyleImagesId(e) {
            this.editStyleForm.waresImages = e.url
            this.selectEditStyleStyleImagesIdForm.url = e.url
            this.editStyleForm.styleImagesId = e.id
        },
        selectSaveWaresStyleImagesId(e, index) {
            // this.styleImagesSelectForm.styleImagesId = e.id
            // this.styleImagesSelectForm.styleImagesName = e.name
            this.saveWaresForm.styleArr[index].styleImages = e.id
            this.selectSaveWaresStyleImagesIdForm.styleArr[index].url = e.url
        },
        selectSaveWaresBrandsId(e) {
            this.brandsSelectForm.brandsName = e.brandsName
            this.saveWaresForm.brandsId = e.id
        },
        // 保存商品，提交
        saveWaresData() {
            console.log(JSON.stringify(this.saveWaresForm))
            console.log(this.saveWaresForm.haveStyle);
            this.$refs.saveWaresForm.validate(valid => {
                if (!valid) {
                    Message({
                        message: '请检查表单！',
                        type: 'warning',
                        duration: 2000
                    })
                    return false
                } else {
                    if (this.isHaveDetail) {
                        console.log('this.isHaveDetail的值：' + this.isHaveDetail, '有款式');
                        this.addWares(this.saveWaresForm)
                    } else {
                        console.log('this.isHaveDetail的值：' + this.isHaveDetail, '无款式');
                        this.addWares(this.saveWaresForm)
                    }
                }
            })
        },
        // 添加商品-请求
        addWares(obj) {
            saveWares(obj).then((res) => {
                if (res.code == 200) {
                    console.log('添加商品', res);
                    Message(({
                        message: '添加成功',
                        type: 'success',
                        duration: 2000
                    }))
                    this.getWaresListData()
                    setTimeout(() => {
                        this.showSaveWaresForm = false
                        this.showStyleForm = false
                        this.showSaveStyleForm = false
                        this.$nextTick(() => {
                            this.$refs.saveWaresForm.resetFields()
                            this.selectSaveWaresWaresImagesIdForm.url = ''
                            this.selectSaveWaresStyleImagesIdForm.styleArr.forEach((v) => {
                                v.url = ''
                            })
                            this.brandsSelectForm.brandsName = ''
                            this.isHaveDetailChange(true)
                        })
                    }, 1500)
                } else {
                    Message(({
                        message: '添加失败',
                        type: 'success',
                        duration: 2000
                    }))
                }
            })
        },
        changeWaresOnAndOffSwitch($event, index, row) {
            console.log('event', $event);
            // 删除
            if ($event) {
                let removeWaresForm = {
                    waresId: row.id,
                    // removeTureOrFalse: false,
                    removeRelated: true
                }
                this.$confirm('进行删除操作，是否永久删除该商品?', '删除提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$prompt('请输入删除理由', '删除提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({ value }) => {
                        removeWaresForm.removeMemo = value
                        offSaleWares(removeWaresForm).then((res) => {
                            if (res.code == 200) {
                                console.log('删除成功', res);
                                this.$message({
                                    type: 'success',
                                    message: '删除成功',
                                    duration: 2000
                                })
                                setTimeout(() => {
                                    this.getWaresListData()
                                }, 1000)
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: '删除失败',
                                    duration: 2000
                                })
                            }
                        })

                    }).catch(() => {
                        this.waresList[index].isDelete = $event
                        this.getWaresListData()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                    this.waresList[index].isDelete = $event
                    this.getWaresListData()
                })
            } else {
                // 恢复
                console.log('已恢复');
                let noRemoveWaresForm = {
                    waresId: row.id,
                }
                onSaleWares(noRemoveWaresForm).then((res) => {
                    if (res.code == 200) {
                        console.log('恢复成功', res);
                        this.$message({
                            type: 'success',
                            message: '恢复成功',
                            duration: 2000
                        })
                        setTimeout(() => {
                            this.getWaresListData()
                        }, 1000)
                    } else {
                        this.$message({
                            type: 'error',
                            message: '恢复失败',
                            duration: 2000
                        })
                    }
                })
            }
        },
        changeWaresPutAndPullSwitch($event, index, row) {
            console.log('$event', $event);
            // 下架
            if ($event) {
                console.log('已下架');
                let pullWaresForm = {
                    waresId: row.id,
                }
                this.$confirm('是否下架该商品?', '下架提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$prompt('请输入下架理由', '下架提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({ value }) => {
                        pullWaresForm.memo = value
                        console.log(JSON.stringify(pullWaresForm));
                        pullWares(pullWaresForm).then((res) => {
                            if (res.code == 200) {
                                console.log('下架成功', res);
                                this.$message({
                                    type: 'success',
                                    message: '下架成功',
                                    duration: 2000
                                })
                                setTimeout(() => {
                                    this.getWaresListData()
                                }, 1000)
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: '下架失败',
                                    duration: 2000
                                })
                            }
                        })

                    }).catch(() => {
                        this.waresList[index].state = $event
                        this.getWaresListData()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消下架'
                    })
                    this.waresList[index].state = $event
                    this.getWaresListData()
                })
            } else {
                // 上架
                console.log('已上架');
                let noPullWaresForm = {
                    waresId: row.id,
                }
                console.log(JSON.stringify(noPullWaresForm));
                putWares(noPullWaresForm).then((res) => {
                    if (res.code == 200) {
                        console.log('上架成功', res);
                        this.$message({
                            type: 'success',
                            message: '上架成功',
                            duration: 2000
                        })
                        setTimeout(() => {
                            this.getWaresListData()
                        }, 1000)
                    } else {
                        this.$message({
                            type: 'error',
                            message: '上架失败',
                            duration: 2000
                        })
                    }
                })
            }
        },
        changeCostPutAndPullSwitch($event, index, row) {
            console.log('$event', $event);
            // 删除
            if ($event) {
                console.log('已删除');
                let pullWaresForm = {
                    waresId: row.id,
                }
                this.$confirm('是否删除该价格?', '删除提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$prompt('请输入删除理由', '删除提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({ value }) => {
                        pullWaresForm.memo = value
                        console.log(JSON.stringify(pullWaresForm));
                        pullWares(pullWaresForm).then((res) => {
                            if (res.code == 200) {
                                console.log('删除成功', res);
                                this.$message({
                                    type: 'success',
                                    message: '删除成功',
                                    duration: 2000
                                })
                                setTimeout(() => {
                                    this.showCostListForm = false
                                    this.getWaresListData
                                }, 1000)
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: '删除失败',
                                    duration: 2000
                                })
                            }
                        })

                    }).catch(() => {
                        this.waresList[index].state = $event
                        this.getWaresDetailData(row.waresId)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                    this.waresList[index].state = $event
                    this.getWaresDetailData(row.waresId)
                })
            } else {
                // 恢复
                console.log('已恢复');
                let noPullWaresForm = {
                    waresId: row.id,
                }
                console.log(JSON.stringify(noPullWaresForm));
                putWares(noPullWaresForm).then((res) => {
                    if (res.code == 200) {
                        console.log('恢复成功', res);
                        this.$message({
                            type: 'success',
                            message: '恢复成功',
                            duration: 2000
                        })
                        setTimeout(() => {
                            this.getWaresDetailData(row.waresId)
                        }, 1000)
                    } else {
                        this.$message({
                            type: 'error',
                            message: '恢复失败',
                            duration: 2000
                        })
                    }
                })
            }
        },
        openSaveStyleForm() {
            this.showSaveStyleForm = true
            this.getAllImagesListData()
            this.isHaveDetailChange(true)
        },
        closeSaveStyleForm() {
            // this.showCostListForm = false
            this.showSaveStyleForm = false
            this.$nextTick(() => {
                this.$refs.saveStyleForm.resetFields()
                this.selectSaveWaresStyleStyleImagesIdForm.url = ''
                this.saveStyleForm.waresImages = ''
            })
        },
        // 添加款式-提交
        saveStyleData() {
            this.saveStyleForm.waresId = this.waresDetailForm.waresId
            console.log(JSON.stringify(this.saveStyleForm))
            this.$refs.saveStyleForm.validate(valid => {
                if (!valid) {
                    Message({
                        message: '请检查表单！',
                        type: 'warning',
                        duration: 2000
                    })
                    return false
                } else {
                    saveStyle(this.saveStyleForm).then((res) => {
                        if (res.code == 200) {
                            console.log('添加款式', res)
                            Message({
                                message: '添加成功',
                                type: 'success',
                                duration: 2000
                            })
                            this.getWaresListData()
                            setTimeout(() => {
                                this.showSaveStyleForm = false
                                this.showStyleForm = false
                                
                                this.$nextTick(() => {
                                    this.$refs.saveStyleForm.resetFields()
                                    this.selectSaveWaresStyleStyleImagesIdForm.url = ''
                                    this.saveStyleForm.waresImages = ''
                                })
                            }, 1500)
                        } else {
                            Message({
                                message: '添加失败',
                                type: 'warning',
                                duration: 2000
                            })
                        }
                    })
                }
            })
        },

        // 展示修改商品款式
        showEditStyle(styleId) {
            this.getAllImagesListData()
            this.editStyleForm.waresId = this.waresDetailForm.waresId
            this.showEditStyleForm = true
            this.editStyleForm.styleId = styleId
            let obj = {
                styleId
            }
            // 数据回显
            getUpdateStyleInfo(obj).then((res) => {
                if (res.code == 200) {
                    console.log('修改商品款式（数据回显）', res)
                    this.editStyleForm.styleName = res.data.styleName
                    this.selectEditStyleStyleImagesIdForm.url = res.data.styleImages
                    this.editStyleForm.styleImages = res.data.styleImages
                }
            })
        },
        closeEditStyleForm() {
            this.showEditStyleForm = false
        },

        editStyleData() {
            console.log(JSON.stringify(this.editStyleForm))
            editStyle(this.editStyleForm).then((res) => {
                if (res.code == 200) {
                    Message({
                        message: '修改成功',
                        type: 'success',
                        duration: 3000
                    })
                    console.log('修改商品款式', res)
                    setTimeout(() => {
                        this.showEditStyleForm = false
                        this.showStyleForm = false
                        this.getWaresListData()
                        this.restSaveWaresForm()
                        this.$nextTick(() => {
                            this.$refs.editStyleForm.resetFields()
                        })
                    }, 2000)

                } else {
                    Message(({
                        message: '修改失败',
                        type: 'success',
                        duration: 2000
                    }))
                }
            })
        },

        changeStyleOnAdnOffSwitch($event, index, row) {
            // 删除
            if ($event) {
                let removeStyleForm = {
                    styleId: row.id,
                    removeRelated: true
                }
                this.$confirm('进行删除操作，是否永久删除该款式?', '删除提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$prompt('请输入删除理由', '删除提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({ value }) => {
                        removeStyleForm.removeMemo = value
                        console.log(JSON.stringify(removeStyleForm));
                        offSaleStyle(removeStyleForm).then((res) => {
                            if (res.code == 200) {
                                console.log('删除成功', res);
                                this.$message({
                                    type: 'success',
                                    message: '删除成功',
                                    duration: 2000
                                })
                                setTimeout(() => {
                                    this.getWaresDetailData(row.waresId)
                                }, 1000)
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: '删除失败',
                                    duration: 2000
                                })
                            }
                        })

                    }).catch(() => {
                        this.waresDetail[index].isDelete = $event
                        this.getWaresDetailData(row.waresId)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                    this.waresDetail[index].isDelete = $event
                    this.getWaresDetailData(row.waresId)
                })
            } else {
                // 恢复
                console.log('已恢复');
                let noRemoveStyleForm = {
                    styleId: row.id,
                }
                console.log(JSON.stringify(noRemoveStyleForm));
                onSaleStyle(noRemoveStyleForm).then((res) => {
                    if (res.code == 200) {
                        console.log('恢复成功', res);
                        this.$message({
                            type: 'success',
                            message: '恢复成功',
                            duration: 2000
                        })
                        setTimeout(() => {
                            this.getWaresDetailData(row.waresId)
                        }, 1000)
                    } else {
                        this.$message({
                            type: 'error',
                            message: '恢复失败',
                            duration: 2000
                        })
                    }
                })
            }
        },

        changeStylePutAndPullSwitch($event, index, row) {
            // 下架
            if ($event) {
                console.log('已下架');
                let pullStyleForm = {
                    styleId: row.id,
                }
                this.$confirm('是否下架该款式?', '下架提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$prompt('请输入下架理由', '下架提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({ value }) => {
                        pullStyleForm.memo = value
                        console.log(JSON.stringify(pullStyleForm));
                        pullStyle(pullStyleForm).then((res) => {
                            if (res.code == 200) {
                                console.log('下架成功', res);
                                this.$message({
                                    type: 'success',
                                    message: '下架成功',
                                    duration: 2000
                                })
                                setTimeout(() => {
                                    this.getWaresDetailData(row.waresId)
                                }, 1000)
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: '下架失败',
                                    duration: 2000
                                })
                            }
                        })

                    }).catch(() => {
                        this.waresDetail[index].state = $event
                        this.getWaresDetailData(row.waresId)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消下架'
                    })
                    this.waresDetail[index].state = $event
                    this.getWaresDetailData(row.waresId)
                })
            } else {
                // 上架
                console.log('已上架');
                let noPullStyleForm = {
                    styleId: row.id,
                }
                console.log(JSON.stringify(noPullStyleForm));
                putStyle(noPullStyleForm).then((res) => {
                    if (res.code == 200) {
                        console.log('上架成功', res);
                        this.$message({
                            type: 'success',
                            message: '上架成功',
                            duration: 2000
                        })
                        setTimeout(() => {
                            this.getWaresDetailData(row.waresId)
                        }, 1000)
                    } else {
                        this.$message({
                            type: 'error',
                            message: '上架失败',
                            duration: 2000
                        })
                    }
                })
            }
        },

        openSaveCostForm() {
            this.showSaveCostForm = true
            this.getAllStyleListData()
        },

        closeSaveCostForm() {
            this.showSaveCostForm = false
            this.$nextTick(() => {
                this.$refs.saveCostForm.resetFields()
                this.selectSaveCostStyleIdForm.styleName = ''
            })
        },
        // 保存提交价格
        saveCostData() {
            this.saveCostForm.waresId = this.costForm.waresId
            console.log(JSON.stringify(this.saveCostForm))
            this.$refs.saveCostForm.validate(valid => {
                if (!valid) {
                    Message({
                        message: '请检查表单！',
                        type: 'warning',
                        duration: 2000
                    })
                    return false
                } else {
                    saveCost(this.saveCostForm).then((res) => {
                        if (res.code == 200) {
                            console.log('添加价格', res)
                            Message({
                                message: '添加成功',
                                type: 'success',
                                duration: 2000
                            })
                            this.getWaresListData()
                            setTimeout(() => {
                                this.showSaveCostForm = false
                                this.showCostListForm = false
                                this.$nextTick(() => {
                                    this.$refs.saveCostForm.resetFields()
                                    this.selectSaveCostStyleIdForm.styleName = ''
                                })
                            }, 1500)
                        } else {
                            Message({
                                message: '添加成失败',
                                type: 'warning',
                                duration: 2000
                            })
                        }
                    })
                }
            })
        },
        selectSaveCostStyleId(e) {
            this.saveCostForm.styleId = e.id
            this.selectSaveCostStyleIdForm.styleName = e.styleName
        },
        selectCostStyleId(e) {
            this.styleSelectForm.styleId = e.id
            this.styleSelectForm.styleName = e.styleName
            this.saveCostForm.styleId = e.id
            this.editCostForm.styleId = e.id
        },
        // 展示商品价格修改（数据回显）
        showEditCost(costId) {
            this.showEditCostForm = true
            this.editCostForm.costId = costId
            let query = {
                costId
            }
            // 数据回显
            getUpdateCostInfo(query).then((res) => {
                if (res.code == 200) {
                    console.log('修改商品价格（数据回显）', res)
                    this.editCostForm.costMessage = res.data.costMessage
                    this.editCostForm.waresPrice = res.data.waresPrice
                    this.editCostForm.styleId = res.data.styleId
                }
            })
        },
        closeEditCostForm() {
            this.showEditCostForm = false
        },
        // 提交编辑
        editCostData() {
            console.log(JSON.stringify(this.editCostForm));
            editCost(this.editCostForm).then((res) => {
                if (res.code == 200) {
                    Message({
                        message: '修改成功',
                        type: 'success',
                        duration: 3000
                    })
                    console.log('修改商品价格', res)
                    setTimeout(() => {
                        this.showEditCostForm = false
                        this.showCostListForm = false
                        this.getWaresListData()
                        this.$nextTick(() => {
                            this.$refs.editCostForm.resetFields()
                        })
                    }, 2000)

                } else {
                    Message(({
                        message: '修改失败',
                        type: 'success',
                        duration: 2000
                    }))
                }
            })
        },
        // 删除 / 恢复
        changeCostOnAdnOffSwitch($event, index, row) {
            console.log('row', row);
            // 删除
            if ($event) {
                let removeCostForm = {
                    costId: row.id,
                }
                this.$confirm('进行删除操作，是否永久删除该价格?', '删除提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$prompt('请输入删除理由', '删除提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({ value }) => {
                        console.log('请求');
                        removeCostForm.removeMemo = value
                        console.log(JSON.stringify(removeCostForm));
                        offSaleCost(removeCostForm).then((res) => {
                            if (res.code == 200) {
                                console.log('删除成功', res);
                                this.$message({
                                    type: 'success',
                                    message: '删除成功',
                                    duration: 2000
                                })
                                setTimeout(() => {
                                    this.getCostData(row.waresId)
                                }, 1000)
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: '删除失败',
                                    duration: 2000
                                })
                            }
                        })

                    }).catch(() => {
                        this.waresCost[index].isDelete = $event
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                    this.waresCost[index].isDelete = $event
                    this.getCostData(row.waresId)
                })
            } else {
                // 恢复
                console.log('已恢复');
                let noRemoveCostForm = {
                    costId: row.id,
                }
                console.log(JSON.stringify(noRemoveCostForm));
                onSaleCost(noRemoveCostForm).then((res) => {
                    if (res.code == 200) {
                        console.log('恢复成功', res);
                        this.$message({
                            type: 'success',
                            message: '恢复成功',
                            duration: 2000
                        })
                        setTimeout(() => {
                            this.getCostData(row.waresId)
                        }, 1000)
                    } else {
                        this.$message({
                            type: 'error',
                            message: '恢复失败',
                            duration: 2000
                        })
                    }
                })
            }
        },
        // 下架 / 上架
        changeCostPutAndPullSwitch($event, index, row) {
            console.log('$event', $event);
            // 下架
            if ($event) {
                console.log('已下架');
                let pullCostForm = {
                    costId: row.id,
                }
                this.$confirm('是否下架该价格?', '下架提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$prompt('请输入下架理由', '下架提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({ value }) => {
                        pullCostForm.memo = value
                        console.log(JSON.stringify(pullCostForm));
                        pullCost(pullCostForm).then((res) => {
                            if (res.code == 200) {
                                console.log('下架成功', res);
                                this.$message({
                                    type: 'success',
                                    message: '下架成功',
                                    duration: 2000
                                })
                                setTimeout(() => {
                                    this.getCostData(row.waresId)
                                }, 1000)
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: '下架失败',
                                    duration: 2000
                                })
                            }
                        })

                    }).catch(() => {
                        this.waresCost[index].state = $event
                        this.getCostData(row.waresId)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消下架'
                    })
                    this.waresCost[index].state = $event
                    this.getCostData(row.waresId)
                })
            } else {
                // 上架
                console.log('已上架');
                let noPullCostForm = {
                    costId: row.id,
                }
                console.log(JSON.stringify(noPullCostForm));
                putCost(noPullCostForm).then((res) => {
                    if (res.code == 200) {
                        console.log('上架成功', res);
                        this.$message({
                            type: 'success',
                            message: '上架成功',
                            duration: 2000
                        })
                        setTimeout(() => {
                            this.getCostData(row.waresId)
                        }, 1000)
                    } else {
                        this.$message({
                            type: 'error',
                            message: '上架失败',
                            duration: 2000
                        })
                    }
                })
            }
        },
    },
    created() {
        utils.checkLogin()
        this.getWaresListData()
    },

}
</script>

<style lang="less" scoped>
.app-container {
    padding: 40px;

    .header {
        align-items: center;
        display: flex;
        margin-bottom: 20px;

        .el-icon-search {
            cursor: pointer;
            margin-right: 4px;
            margin-top: 8px;
        }

    }

    .url {
        .el-select-dropdown__item {
            height: 100%;
        }
    }


    .content {
        text-align: center;
    }
}
</style>